<template>
  <div class="contents">
    <span class="back" @click="goBack">返回上一页</span>
    <!-- 一楼 -->
    <div class="f1" v-loading="loading">
      <div class="title" v-if="projectMessage">
        <p>{{ projectMessage.oderid }}</p>
        <h5
          :class="{
            tg: projectMessage.status == '审批中',
            spjj: projectMessage.status == '审批拒绝',
            tg: projectMessage.status == '审批通过',
            tg: projectMessage.status == '正常结项',
            jj: projectMessage.status == '逾期结项'
          }"
        >
          {{ projectMessage.status }}
        </h5>
      </div>
      <!-- 产品信息 -->
      <div class="details-item" v-if="projectMessage">
        <div class="details-item-left">
          <ul>
            <li>产品名称：</li>
            <li>授信额度（元）：</li>
            <!-- <li>在贷余额（元）：</li> -->
            <li>保函期限（月）：</li>
          </ul>
          <div>
            <p>{{ projectMessage.productname | getData }}</p>
            <p>{{ projectMessage.credit.amount | getArea }}</p>
            <!-- <p v-if="projectMessage.status == '审批中'">
              {{
                (projectMessage.credit.amount -
                  projectMessage.credit.availamount)
                  | getArea
              }}
            </p>
            <p v-else-if="projectMessage.status == '审批拒绝'">-</p>
            <p v-else>
              {{
                (projectMessage.credit.amount -
                  projectMessage.credit.availamount)
                  | getAreas
              }}
            </p> -->
            <p>{{ projectMessage.credit.termmonth | getData }}</p>
          </div>
        </div>
        <div class="details-item-left">
          <ul>
            <li>申请日期：</li>
            <li>年化利率（%）：</li>
            <!-- <li>剩余可用额度（元）：</li> -->
            <!-- <li>授信有效期终止日：</li> -->
            <li>保函有效期起始日：</li>
          </ul>
          <div>
            <p>{{ projectMessage.credit.applydate | getDate }}</p>
            <p>{{ projectMessage.credit.radio | getArea }}</p>
            <!-- <p>
              {{ projectMessage.credit.availamount | getArea }}
            </p> -->
            <!-- <p>{{ projectMessage.credit.enddate | getDate }}</p> -->
            <p>{{ projectMessage.credit.startdate | getDate }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 二楼 -->
    <div class="f2" v-loading="loading">
      <div class="title">
        <h3 :class="{ active: row == 1 }" @click="row = 1">项目信息</h3>
        <!-- <h3 :class="{ active: row == 2 }" @click="row = 2">用款信息</h3> -->
      </div>
      <!-- 申请信息 -->
      <div v-show="row == 1">
        <div class="titles">
          <h1></h1>
          <h3>项目进度</h3>
        </div>
        <div class="schedule" v-if="findxmjd">
          <div class="schedule1">
            <img src="@/assets/shangpiao/组194.png" alt="" />
            <h1
              :class="{
                dfk: findxmjd.b == 'null'
              }"
            ></h1>
            <img
              :src="require(`@/assets/shangpiao/组${findxmjd.b == 'null' ? '195' : '194'}.png`)"
              alt=""
            />
            <h1
              :class="{
                dfk: findxmjd.c == null
              }"
            ></h1>
            <img
              :src="require(`@/assets/shangpiao/组${findxmjd.c == null ? '195' : '194'}.png`)"
              alt=""
            />
          </div>
          <div class="schedule2">
            <div
              class="state"
              :class="{
                jj: findxmjd.statu == '拒绝',
                yqx: findxmjd.statu == '已取消',
                yyq: findxmjd.statu == '已逾期',
                yfk: findxmjd.statu == '已放款'
              }"
              v-if="findxmjd.statu != 'null'"
            >
              {{ findxmjd.statu }}
            </div>
            <span>业务申请</span>
            <h2></h2>
            <span
              :class="{
                dfk: findxmjd.b == 'null'
              }"
              >项目审批</span
            >
            <h2></h2>
            <span
              :class="{
                dfk: findxmjd.c == null
              }"
              >项目结项</span
            >
          </div>
          <div class="schedule3">
            <span>{{ findxmjd.a }}</span>
            <h3></h3>
            <span>{{ findxmjd.b == 'null' ? '' : findxmjd.b }}</span>
            <h3></h3>
            <span>{{ findxmjd.c == null ? '' : findxmjd.c }}</span>
          </div>
        </div>
        <div class="titles">
          <h1></h1>
          <h3>申请信息</h3>
        </div>
        <div class="details-item" v-if="projectMessage">
          <div class="details-item-left">
            <ul style="position: relative; width: 1rem">
              <li>项目名称：</li>
              <li>合同签订时间：</li>
              <li>合同金额（元）：</li>
            </ul>
            <div style="width: 1.0417rem; margin-right: 0.2344rem">
              <el-tooltip
                v-if="projectMessage.phApplyInfo.projectname.length > 11"
                class="item"
                effect="light"
                :content="projectMessage.phApplyInfo.projectname"
                placement="top-start"
              >
                <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                  {{ projectMessage.phApplyInfo.projectname | getData }}
                </p>
              </el-tooltip>
              <p v-else style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                {{ projectMessage.phApplyInfo.projectname | getData }}
              </p>
              <p>{{ projectMessage.phApplyInfo.signday | getData }}</p>
              <p>
                {{ projectMessage.phApplyInfo.conamount | getAreas }}
              </p>
            </div>
          </div>
          <div class="details-item-left">
            <ul style="position: relative">
              <li>期望使用保函额度（元）：</li>
              <li>期望使用保函时间：</li>
              <li>期望使用保函期限（月）：</li>
            </ul>
            <div>
              <p>
                {{ projectMessage.phApplyInfo.expectationamount | getAreas }}
              </p>
              <p>{{ projectMessage.phApplyInfo.expectationdate | getData }}</p>
              <p>
                {{ projectMessage.phApplyInfo.expectationdeadline | getData }}
              </p>
            </div>
          </div>
        </div>
        <div
          class="titles"
          style="margin-top: 0.1563rem"
          v-if="projectMessage.file && projectMessage.file.length != 0"
        >
          <h1></h1>
          <h3>合同信息</h3>
        </div>
        <el-table
          v-if="projectMessage.file && projectMessage.file.length != 0"
          :data="projectMessage.file"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%; margin-top: 0.1563rem"
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          <el-table-column label="序号" min-width="4%" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="oldfilename" label="文件名称" min-width="25%" align="center">
            <template slot-scope="scope">
              <span>{{ projectMessage.file[scope.$index].oldfilename.split('.')[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="examine(scope.$index, projectMessage.file)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 合同信息表格 -->
        <div class="titles" style="margin: 40px 0">
          <h1></h1>
          <h3>合同信息</h3>
        </div>
        <el-table
          :data="contractData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          <el-table-column prop="" label="序号" min-width="2%" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="conno" label="合同编号" min-width="6%" align="center">
          </el-table-column>
          <el-table-column prop="conname" label="合同名称" min-width="6%" align="center">
          </el-table-column>

          <el-table-column prop="signday" label="签署时间" min-width="4%" align="center">
          </el-table-column>

          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="checkContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 用款申请 -->
      <div v-show="row == 2">
        <div class="details-itemYK" style="margin-top: 30px">
          <div class="null" v-if="!yongKuan">
            <img src="@/assets/shangpiao/暂无记录.png" alt="" />
            <p>暂无数据记录</p>
          </div>
          <div class="details-item-left" v-else>
            <el-table
              :data="yongKuan"
              border
              highlight-current-row
              stripe
              type="index"
              style="width: 100%"
              :header-cell-style="{
                background: '#F1F5FF',
                color: '#4D4D4D'
              }"
            >
              <el-table-column prop="num" label="序号" min-width="2%" align="center">
              </el-table-column>
              <el-table-column prop="putoutid" label="用信编号" min-width="7%" align="center">
              </el-table-column>
              <el-table-column
                prop="businesssum"
                label="放款金额（元）"
                min-width="5%"
                align="center"
              >
                <template slot-scope="scope">{{ scope.row.businesssum | getArea }}</template>
              </el-table-column>
              <el-table-column prop="inputdate" label="申请日期" min-width="5%" align="center">
                <template slot-scope="scope">{{ scope.row.inputdate | getDate }}</template>
              </el-table-column>
              <el-table-column prop="loandate" label="放款日期" min-width="5%" align="center">
                <template slot-scope="scope">{{ scope.row.loandate | getDate }}</template>
              </el-table-column>

              <el-table-column prop="status" label="项目状态" min-width="5%" align="center">
                <template slot-scope="scope">{{ scope.row.status | getDate }}</template>
              </el-table-column>
              <el-table-column label="操作" min-width="4%" align="center">
                <template slot-scope="scope">
                  <span
                    class="span"
                    @click="goCheckContract(scope.$index, yongKuan)"
                    type="text"
                    size="small"
                  >
                    查看
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findbusapplyputout, myPostFetch } from '@/utils'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      loading: false,
      entname: '',
      findxmjd: null,
      row: 1,
      id: '', //项目id
      status: '', //项目状态
      projectMessage: '', // 产品信息
      // 用款信息
      yongKuan: null,
      //组件弹窗
      dialogVisible: false,
      // 合同信息
      contractData: null
    }
  },
  // 计算属性
  computed: {
    ...mapState(['shangLianApplyParameter'])
  },
  mounted() {
    // 获取地址栏中的id
    this.id = this.shangLianApplyParameter.applyid
    this.status = this.shangLianApplyParameter.status
    // 申请信息
    this.findbus()
    // 进度条
    this.getFindxmjd()
    // // // 用款信息
    this.getFindbusapplyputout()
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '-'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getAreas: function (value) {
      value = parseFloat(value)
      if (value == 0) return '0.00'
      if (!value) return '0.00'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return '-'
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (!value || value == '') {
        return '-'
      } else {
        return value
      }
    }
  },
  methods: {
    // 查看合同信息
    async checkContract(index, data) {
      let val = data[index]
      const a = document.createElement('a') // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute('target', '_blank')
      a.href = val.filepath
      a.click()
    },
    // 项目进度
    async getFindxmjd() {
      let url = '/api/BusinessSPs/findxmjd'
      let params = {
        applyid: this.id
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        let date = data.data.b.split('@')[0]
        let b = data.data.b.split('@')[1]
        this.findxmjd = data.data
        this.findxmjd.b = date
        this.findxmjd.statu = b
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
      setTimeout(() => {
        this.$router.go(0)
      }, 50)
    },
    // 获取申请信息
    async findbus() {
      this.loading = true
      let url = '/api/PHYApply/productsubphy'
      let params = {
        applyid: this.id
      }
      let { data } = await myPostFetch(url, params)
      this.projectMessage = data
      this.contractData = data.Contract
      this.loading = false
    },

    // 用款信息
    async getFindbusapplyputout() {
      let url = '/api/PHYApply/findbusapplyputout'
      let params = {
        applyid: this.id
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        this.yongKuan = data.data
        for (let i = 0; i < this.yongKuan.length; i++) {
          this.yongKuan[i].num = i + 1
        }
      }
    },
    // 跳转用信详情页
    goCheckContract(index, row) {
      let status = row[index].status
      let putoutid = row[index].putoutid
      this.$store.commit('updataSLPutoutid', putoutid)
      this.$store.commit('updataSLStatus', status)
      this.$router.push(`/yongXinZBD`)
    },
    // 查看 文件
    examine(index, data) {
      let imgUrlStr = data[index].filepath
      let name = data[index].newfilename.split('.')[1]
      // if (name == "jpg" || name == "png") {
      const a = document.createElement('a') // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute('target', '_blank')
      a.href = imgUrlStr
      a.click()
      // }
      // else {
      //   fetch(imgUrlStr).then((res) => {
      //     console.log(123213);
      //     // res.blob().then((blob) => {
      //     //   const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      //     //     url = window.URL.createObjectURL(blob),
      //     //     filename = val.newfilename;
      //     //   a.href = url;
      //     //   a.download = filename;
      //     //   a.click();
      //     //   window.URL.revokeObjectURL(url);
      //     // });
      //   });

      //   // );
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.contents {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: rgb(242, 244, 247);
  // 返回上一页
  .back {
    position: absolute;
    left: 30vw;
    top: 0.599rem;
    font-size: 0.0833rem;
    color: #3f6ef2;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 0.3958rem;
    font-size: 0.0833rem;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 0.0521rem 0 0.0208rem;
    }
    .span {
      font-size: 0.0833rem;

      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 0.0938rem;
      height: 0.0938rem;
      margin-right: 0.026rem;
    }
  }

  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0.0052rem 0.0521rem 0px rgba(196, 196, 196, 0.15);
    border-radius: 0.0313rem;
    margin-bottom: 0.0521rem;
    padding: 0.1563rem 0.2604rem;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.125rem;
      p {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #000;
      }
      h5 {
        box-sizing: border-box;
        padding: 1px 4px;
        background: #3f6ef2;
        border-radius: 0.0104rem;
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 0.0938rem;
        margin-left: 0.0417rem;
        &.tg {
          background: #3f6ef2;
        }
        &.jj {
          background: #ff6060;
        }
        &.spjj {
          background: #ff6060;
        }
      }
      span {
        font-size: 0.0677rem;
        margin-left: 0.2604rem;
        i,
        a {
          color: #3f6ef2;
          text-decoration: underline;
          cursor: pointer;
          &.aaa {
            color: #999;
          }
        }
      }
    }
    .details-item {
      display: flex;
      .details-item-left {
        display: flex;
        width: 100%;
        height: 100%;
        ul {
          width: 1rem;
          height: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          li {
            margin-top: 0.1042rem;
            height: 0.1563rem;
            background-color: #fff;
          }
        }
        div {
          // width: 0.7031rem;
          height: 100%;
          margin-left: 0.0781rem;
          z-index: 99;
          p {
            height: 0.1563rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            margin-top: 0.1042rem;
          }
        }
      }
    }
  }
  .f2 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.0313rem;
    padding: 0 0.2604rem;
    padding-bottom: 0.1823rem;
    scroll-behavior: smooth;
    overflow: auto;
    h2 {
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #000000;
      margin: 0.151rem 0 0.0521rem 0;
    }
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.1823rem;
      margin-top: 0.1302rem;
      margin-bottom: 0.1302rem;
      h3 {
        height: 0.1667rem;
        width: 0.3906rem;
        line-height: 0.1458rem;
        text-align: center;
        box-sizing: border-box;
        margin-right: 0.1823rem;
        font-family: Source Han Sans SC;
        color: #838383;
        font-size: 0.0938rem;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        &.active {
          box-sizing: border-box;
          border-bottom: 2px solid #3f6ef2;
          color: #3f6ef2;
        }
      }
    }
    // 进度
    .schedule {
      width: 100%;
      margin: 0.2604rem 0;
      .schedule1 {
        box-sizing: border-box;
        padding: 0 0.2344rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 0.1823rem;

        img {
          width: 0.1823rem;
        }
        h1 {
          width: 2.4323rem;
          height: 0.0052rem;
          background: #3f6ef2;
          &.dfk {
            background: #a4a4a4;
          }
        }
      }
      .schedule2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-sizing: border-box;
        padding: 0 0.0781rem;
        width: 100%;
        height: 0.1823rem;
        h2 {
          width: 2.0833rem;
          height: 0.0052rem;
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #3f6ef2;
          &.dfk {
            color: #a4a4a4;
          }
        }
        .state {
          box-sizing: border-box;
          padding: 0px 0.0208rem;
          display: flex;
          justify-content: center;
          justify-items: center;
          position: absolute;
          left: 54%;
          background: #22b556;
          opacity: 0.8;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          &.jj {
            background: #fc6464;
          }
          &.spz {
            background: #3f6ef2;
          }
          &.sptg {
            background: #48b8a7;
          }
          &.spjj {
            background: #ff6060;
          }
          &.dfk {
            background: #f19149;
          }
          &.yfk {
            background: #13b5b1;
          }
          &.yyq {
            background: #ec6941;
          }
          &.zcjx {
            background: #80c269;
          }
          &.yqjx {
            background: #448aca;
          }
          &.yqx {
            background: #556fb5;
          }
          &.djf {
            background: #6291fa;
          }
        }
      }
      .schedule3 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 0.1823rem;
        h3 {
          width: 1.9271rem;
          height: 0.0052rem;
        }
        span {
          display: block;
          width: 0.8333rem;
          text-align: center;
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #8d93a1;
        }
      }
    }
    .titles {
      display: flex;
      align-items: center;
      h1 {
        height: 0.1042rem;
        width: 0.0313rem;
        background-color: #e8903c;
      }
      h3 {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #e8903c;
        margin-left: 0.0625rem;
      }
    }
    // 基本信息
    .details-item {
      display: flex;
      .details-item-left {
        display: flex;
        width: 100%;
        height: 100%;
        ul {
          width: 1.4rem;
          height: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          overflow: hidden;
          // white-space: nowrap;
          text-overflow: ellipsis;
          li {
            margin-top: 0.1563rem;
            // height: 0.1563rem;
            background-color: #fff;
          }
        }
        div {
          // width: 0.7031rem;
          height: 100%;
          margin-left: 0.0781rem;
          z-index: 99;
          p {
            height: 0.1563rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            margin-top: 0.145rem;
          }
        }
      }
    }
    // 用款信息
    .details-itemYK {
      display: flex;
      margin: 10px 15px;
      // 空状态
      .null {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 100px;
        p {
          font-size: 16px;
          color: #b3b3b3;
        }
        img {
          width: 326px;
        }
      }
      .details-item-left {
        width: 100%;
      }
    }
    // 表格编辑/查看
    .span {
      display: inline-block;
      width: 0.1563rem;
      height: 0.125rem;
      font-size: 0.0781rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: rgb(63, 110, 242);
      border-bottom: 0.0052rem solid #3f6ef2;
      cursor: pointer;
      margin-right: 0.026rem;
    }
  }
  // .f2::-webkit-scrollbar {
  //   width: 5px;
  //   height: 10px;
  //   background-color: #fff;
  // }

  // .f2::-webkit-scrollbar-thumb {
  //   border-radius: 2px;
  //   background: #426cdf;
  // }

  // 弹出框
  .dialog-center {
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #58b2cb;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 15px;
    .file {
      font-size: 15px;
      margin-right: 10px;
      color: #3f6ef2;
      text-decoration: underline;
      cursor: pointer;
    }
    .file1 {
      color: #999;
    }
  }
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
  .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 85px);
  }
}

::v-deep .el-dialog__headerbtn {
  top: 0.1042rem;
  font-size: 0.0833rem;
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
.el-table tr {
  height: 40px;
}
.el-table thead {
  height: 40px;
}
.el-button--small {
  padding: 0;
}
/* 输入框样式  */
.el-input__inner {
  box-sizing: border-box;
  width: 280px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
}
/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 25px 0 30px;
}
.el-form-item__label {
  padding-right: 6px !important;
}
</style>
